<template>
	<div class="placeholder flexv">
		<pub-head title="确认订单"></pub-head>
		<!-- 收货地址 -->
		<div class="to-add flex ali-c jus-c" @click="toAddress" v-if="list.length==0">
			<div class="flex ali-c">
				<van-icon name="add-o" class="to-add-icon" /><span>添加收货地址</span>
			</div>
		</div>
		<div class="to-add" @click="toAddress" v-else>
			<div class="flex jus-b ali-c">
				<div>
					<div class="to-add-top">
						<span>{{list.name}}</span>
						<span>{{list.phone}}</span>
					</div>
					<div class="to-add-bottom">
						<span>
							{{list.site}}
						</span>
					</div>
				</div>
				<div>
					<van-icon name="arrow" />
				</div>
			</div>
		</div>
		<div class="commod-list mt2">
			<div class="commod-list-t flex ali-c">
				<van-icon name="orders-o" class="img" /><span>商品清单</span>
			</div>
			<div class="commod-list-c" v-for="(item,index) in goodList" :key="index">
				<div class="flex goods-title ali-c">
					<img src="@/assets/e_shop@2x.png" />
					{{item.merchant_name}}
				</div>
				<div class="flex jus-b mt2" v-for="(item1,index1) in item.goods" :key="index1">
					<div class="list-c-img">
						<img :src="item1.image" />
					</div>
					<div class="list-c-text flexv jus-b">
						<div class="list-c-title">
							<span>
								{{item1.goods_name}}
							</span>
						</div>
						<div class="list-c-body">
							<span>
								{{item1.goods_type}}
							</span>
						</div>
						<div class="list-c-footer flex jus-b">
							<span class="red">
								¥{{item1.goods_price}}
							</span>
							<span style="font-size: 0.32rem;">
								X{{item1.num}}
							</span>
						</div>
					</div>
				</div>
				
			</div>
			<!-- 买家留言 -->
			<div class="content flex mt2">
				<span>买家留言</span>
				<input type="text" class="flex1" placeholder="填写内容需要与商家协商并确认" maxlength="25" v-model="content">
			</div>
		</div>
		<!-- 商品金额和配送费用 -->
		<div class="price-fill">
			<div class="flex jus-b price-name">
				<span class="name">商品金额</span>
				<span class="red">￥{{allPrice.toFixed(2)}}</span>
			</div>
			<div class="flex jus-b price-name">
				<span class="name">配送费用</span>
				<span class="red">包邮</span>
			</div>
		</div>

		<!-- 底部栏 -->
		<div class="placeholder-space mt2"></div>
		<div class="order-foot flex">
			<div class="flex order-foot-left flex1">
				<span class="text">共{{goodInfo.goods_num}}件，</span>
				<span class="red">合计：</span>
				<span class="red">￥{{allPrice.toFixed(2)}}</span>
			</div>
			<div class="sub-order flexc white click" @click="toSuccess">提交订单</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		Icon
	} from 'vant';

	Vue.use(Icon);
	import {
		ReciveAddress,
		ProductOrder
	} from '@/request/api';
	import pubHead from '@/components/head';
	export default {
		components: {
			pubHead,
		},
		computed:{
			allPrice(){
				let all;
				let s=0
				let allprice=0
				this.goodList.map(item=>{
					 item.goods.map(child=>{
						allprice = allprice+child.goods_price*child.num
					})
					
				})
				// all.forEach(val=>{
				// 	s = s+val
				// })
				return allprice
			}
		},
		data() {
			return {
				address: '', // 收货地址
				text: '',
				content: '',
				hasAddress: true,
				isEmpty: false,
				list: [],
				goodInfo:{},
				address_id:'',
				goodList:[],
				allNum:null
				
			}
		},
		created() {
			// var list = decodeURIComponent(this.$route.params.obj);
			// console.log(list)
			this.goodList =JSON.parse(this.$route.query.data) 
			this.getDatas() 
			this.goodList = this.uniqObjInArray(this.goodList)
			this.goodList.forEach((item2,index) =>{
				item2.goods.forEach((x,ind) =>{
					if(!x.check){
						item2.goods.splice(ind,1);
					}
					
				})
			})
			console.log(this.goodList)
			
		},
		methods: {
			
			uniqObjInArray(objarray){
			    let len = objarray.length;
			    let tempJson = {
			        
			    };
			    let res = [];
			    for(let i = 0;i < len;i++){
			        //取出每一个对象
			        tempJson[JSON.stringify(objarray[i])] = true;
			    }
			    let keyItems= Object.keys(tempJson);
			    for(let j = 0;j < keyItems.length;j++){
			        res.push(JSON.parse(keyItems[j]));
			    }
			    return res;
			},
			getDatas() {
				// 获取收货地址
				ReciveAddress({
					token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
					page: 1, //当前页		
					pagesize: 10, //每页多少条数据
				}).then(res => {
					if (res.code == 1) {
						if(res.data.list.length>0)
						{
							this.list = res.data.list[0];
							this.address_id = res.data.list[0].address_id
						}
						this.isEmpty = this.list.length == 0;
						
					} else {
						this.$tip(res.msg)
					}
				})

			},
			// 传入一个数组
			// 按照特定方式格式化
			sortArr(arr, str) {
			    var _arr = [],
			        _t = [],
			        // 临时的变量
			        _tmp;
			 
			    // 按照特定的参数将数组排序将具有相同值得排在一起
			    arr = arr.sort(function(a, b) {
			        var s = a[str],
			            t = b[str]
			        return s < t ? -1 : 1
			    })
			    if ( arr.length ){
			        _tmp = arr[0][str]
			    }
			    // console.log( arr )
			    for (var i in arr) {
			        console.log( _tmp)
			        if ( arr[i][str] === _tmp ){
			            console.log(_tmp)
			            _t.push( arr[i] )
			        } else {
			            _tmp = arr[i][str]
			            _arr.push( _t )
			            _t = [arr[i]]
			        }
			    }
			    // 将最后的内容推出新数组
			    _arr.push( _t )
			    return _arr
			},
			toAddress() {
				this.$router.push('/address')
			},
			toSuccess(){
				let carId = []
				let goodId = []
				this.goodList.forEach(val=>{
					val.goods.forEach(value=>{
						this.allNum = this.allNum + value.num
					})
					
				})
				this.goodList.map(val=>{
					val.goods.map(value=>{
						carId.push(value.id)
						goodId.push(value.goods_id)
					})
				})
				
				carId = carId.join()
				goodId = goodId.join()
				console.log(carId)
				console.log(goodId)
				if(this.address_id==''){
					this.$tip('请选择收货地址！')
					return
				}
				// this.$router.push('/payResult?type=2')
				ProductOrder({
					token:localStorage.getItem('token') ? localStorage.getItem('token') : '',
					status:1,
					totalprice:this.allPrice,
					num:this.allNum,
					type:1,//1）正常商品 2）限时抢购 4)2人团购-团购 5）团购单独购买 6套餐下单
					remark:this.content,
					goods_id:goodId,
					address_id:this.address_id,
					shoping_cart_ids:carId,
					is_status:1
				}).then(res=>{
					if(res.code==1){
						this.$tip(res.msg)
						let that = this
						
						setTimeout(() =>{
						  let data = {
						      order_no: res.data.order_no,
						      pay_money: that.allPrice
						  }
						  that.$router.replace('/orderPay?info='+JSON.stringify(data))
						},1200)
						
					}
					else{
						this.$tip(res.msg)
					}
				})
				this.allNum = null
			}
			
		}


	}
</script>
<style lang="less">
	.placeholder {
		min-height: 100vh;
		background-color: #f0f0f0;

		.to-add {
			max-width: 750px;
			height: 1.2rem;
			background-color: #FFFFFF;
			padding: 0.1rem 0.2rem;

			.to-add-user {
				display: flex;
				justify-content: space-between !important;
			}

			.to-add-icon {
				width: 0.36rem;
				height: 0.36rem;
				color: #50AD22;
				font-size: 0.38rem;
				margin-right: 0.1rem;
			}

			span {
				color: #999999;
				font-size: 0.32rem;
			}

			.to-add-top {
				span {
					color: #333333;
					font-size: 0.32rem;
					margin-right: 0.1rem;
				}
			}

			.to-add-bottom {
				margin-top: 0.1rem;

				span {
					color: #666666;
					font-size: 0.24rem;
				}
			}
		}

		.commod-list {
			background-color: #FFFFFF;
			padding: 0.2rem;

			.commod-list-t {

				.img {
					font-size: .32rem;
					margin-right: 0.10rem;
				}

				span {
					color: #333;
					font-size: 0.28rem;
					font-weight: bold;
				}
			}

			.commod-list-c {
				padding: .2rem 0;
				.goods-title{
					color: #333;
					font-size: 0.32rem;
					margin-bottom: 0.3rem;
					img{
						width: 0.36rem;
						height: 0.32rem;
						margin-right: 0.1rem;
					}
				}
				.list-c-img {
					width: 1.8rem;
					height: 1.8rem;
					margin-right: .2rem;

					img {
						width: 100%;
						height: 100%;
						border-radius: 0.1rem;
					}
				}

				.list-c-text {
					flex: 1;

					.list-c-title {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;

						span {
							color: #333;
							font-size: 0.28rem;
						}
					}

					.list-c-body {
						font-size: 0.24rem;
						color: #999999;
					}

					.list-c-footer {
						.red {
							font-size: 0.28rem;
							color: red;
						}

					}
				}
			}

			// 买家留言
			.content {
				height: 0.84rem;
				font-size: 0.28rem;
				line-height: 0.84rem;
				color: #333;
				background-color: #fff;

				input {
					width: 4rem;
					height: 0.6rem;
					margin: auto 0 auto 0.3rem;
					line-height: 0.6rem;
				}
			}
		}

		.price-fill {
			margin-top: 0.2rem;
			background-color: #FFFFFF;
			padding: 0.2rem;

			.price-name {
				padding: .2rem 0;

				.name {
					color: #333333;
					font-size: 0.28rem;
				}

				.red {
					color: #EE1C1A;
					font-size: 0.24rem;
				}
			}
		}

		.placeholder-space {
			width: 100%;
			height: 0.98rem;
		}

		.order-foot {
			width: 100%;
			max-width: 750px;
			height: 0.98rem;
			margin: 0 auto;
			position: fixed;
			z-index: 100;
			bottom: 0;
			left: 0;
			right: 0;
			font-size: 0.3rem;
			line-height: 0.98rem;
			color: #333;
			background-color: #fff;

			.order-foot-left {
				padding: 0 0.2rem;
				border-top: 1px solid #dfe1e4;

				.text {
					color: #666;
					font-size: 0.24rem;
				}

				.red {
					color: #EE1C1A;
					font-size: 0.24rem;
				}
			}

			.sub-order {
				width: 2rem;
				background-color: #50AD22;
			}
		}
	}
</style>
